<template>
  <div
    ref="tableContainer"
    style="width: calc(100vw - 200px); height: 100vh"
  ></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as VTable from "@visactor/vtable";
import VChart from "@visactor/vchart";
import data from "../json/pie-perspective.json";
console.log("=========", VTable, VChart);
VTable.register.chartModule("vchart", VChart);

defineOptions({
  name: "MyVTablePiePerspective",
});

const tableContainer = ref(null);

const columns = [
  {
    dimensionKey: "Region",
    title: "Region",
    headerStyle: {
      textStick: true,
    },
  },
  "Category",
];
const rows = [
  {
    dimensionKey: "Order Year",
    title: "Order Year",
    headerStyle: {
      textStick: true,
    },
  },
  "Ship Mode",
];
const indicators = [
  {
    indicatorKey: "Quantity",
    title: "Quantity",
    cellType: "chart",
    chartModule: "vchart",
    chartSpec: {
      // type: 'common',
      stack: true,
      type: "pie",
      data: {
        id: "data",
        fields: {
          "Segment-Indicator": {
            sortIndex: 1,
            domain: [
              "Consumer-Quantity",
              "Corporate-Quantity",
              "Home Office-Quantity",
            ],
          },
        },
      },
      categoryField: "Segment-Indicator",
      valueField: "Quantity",
      scales: [
        {
          id: "color",
          type: "ordinal",
          domain: [
            "Consumer-Quantity",
            "Corporate-Quantity",
            "Home Office-Quantity",
          ],
          range: ["#2E62F1", "#4DC36A", "#FF8406"],
        },
      ],
    },
    style: {
      padding: 1,
    },
  },
];
const option = ref({
  hideIndicatorName: true,
  rows,
  columns,
  indicators,
  container: tableContainer.value,
  // records: data,
  defaultRowHeight: 200,
  defaultHeaderRowHeight: 50,
  defaultColWidth: 280,
  defaultHeaderColWidth: 100,
  indicatorTitle: "指标",
  autoWrapText: true,
  widthMode: "adaptive",
  heightMode: "adaptive",
  corner: {
    titleOnDimension: "row",
    headerStyle: {
      autoWrapText: true,
    },
  },
  legends: {
    orient: "bottom",
    type: "discrete",
    data: [
      {
        label: "Consumer-Quantity",
        shape: {
          fill: "#2E62F1",
          symbolType: "circle",
        },
      },
      {
        label: "Corporate-Quantity",
        shape: {
          fill: "#4DC36A",
          symbolType: "square",
        },
      },
      {
        label: "Home Office-Quantity",
        shape: {
          fill: "#FF8406",
          symbolType: "square",
        },
      },
    ],
  },
  pagination: {
    currentPage: 0,
    perPageCount: 8,
  },
});

onMounted(() => {
  option.value.container = tableContainer.value;
  // option.value.records = data;
  const tableInstance = new VTable.PivotTable(option.value);
  const { LEGEND_ITEM_CLICK } = VTable.ListTable.EVENT_TYPE;
  tableInstance.on(LEGEND_ITEM_CLICK, (args) => {
    console.log("LEGEND_ITEM_CLICK", args);
    tableInstance.updateFilterRules([
      {
        filterKey: "Segment-Indicator",
        filteredValues: args.value,
      },
    ]);
  });
  window.tableInstance = tableInstance;
});
</script>

